<template>
    <div class="my-his-wrapper">
        <div class="his-5"></div>
        <div class="his-2"></div>
        <div class="his-1"></div>
        <div class="his-no-heap-1"></div>
    
        <div class="his-6"></div>
        <div class="his-3"></div>
        <div class="his-4"></div>
        <div class="his-no-heap-2"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data2: [{
                    group: "111",
                    data: [{
                            title: "",
                            toolTip: "",
                            value: 70,
                            color: 0xffff77,
                        },
                        {
                            title: "",
                            toolTip: "",
                            value: 60,
                            color: 0x6699FF,
                        },
                        {
                            title: "",
                            toolTip: "",
                            value: 100,
                            color: 0x33ccff,
                        },
                        {
                            title: "",
                            toolTip: "",
                            value: 50,
                            color: 0xff88c2,
                        },
                    ],
                },
                {
                    group: "222",
                    data: [{
                            title: "",
                            toolTip: "",
                            value: 60,
                            color: 0xffff77,
                        },
                        {
                            title: "",
                            toolTip: "",
                            value: 40,
                            color: 0x6699FF,
                        },
                        {
                            title: "",
                            toolTip: "",
                            value: 10,
                            color: 0x33ccff,
                        },
                        {
                            title: "",
                            toolTip: "",
                            value: 20,
                            color: 0xff88c2,
                        },
                    ],
                },
                {
                    group: "333",
                    data: [{
                            title: "",
                            toolTip: "",
                            value: 120,
                            color: 0xffff77,
                        },
                        {
                            title: "",
                            toolTip: "",
                            value: 40,
                            color: 0x6699FF,
                        },
                        {
                            title: "",
                            toolTip: "",
                            value: 20,
                            color: 0x33ccff,
                        },
                        {
                            title: "",
                            toolTip: "",
                            value: 30,
                            color: 0xff88c2,
                        },
                    ],
                },
                {
                    group: "333",
                    data: [{
                            title: "",
                            toolTip: "",
                            value: 70,
                            color: 0xffff77,
                        },
                        {
                            title: "",
                            toolTip: "",
                            value: 40,
                            color: 0x6699FF,
                        },
                        {
                            title: "",
                            toolTip: "",
                            value: 80,
                            color: 0x33ccff,
                        },
                        {
                            title: "",
                            toolTip: "",
                            value: 30,
                            color: 0xff88c2,
                        },
                    ],
                },
                {
                    group: "333",
                    data: [{
                            title: "",
                            toolTip: "",
                            value: 100,
                            color: 0xffff77,
                        },
                        {
                            title: "",
                            toolTip: "",
                            value: 40,
                            color: 0x6699FF,
                        },
                        {
                            title: "",
                            toolTip: "",
                            value: 80,
                            color: 0x33ccff,
                        },
                        {
                            title: "",
                            toolTip: "",
                            value: 60,
                            color: 0xff88c2,
                        },
                    ],
                },
            ],
            data3: [{
                    group: "111",
                    data: [{
                        title: "",
                        toolTip: "",
                        value: 70,
                        color: 0xffff77,
                    }, ],
                },
                {
                    group: "222",
                    data: [{
                        title: "",
                        toolTip: "",
                        value: 60,
                        color: 0xffff77,
                    }, ],
                },
                {
                    group: "333",
                    data: [{
                        title: "",
                        toolTip: "",
                        value: 120,
                        color: 0xffff77,
                    }, ],
                },
                {
                    group: "333",
                    data: [{
                        title: "",
                        toolTip: "",
                        value: 70,
                        color: 0xffff77,
                    }, ],
                },
                {
                    group: "333",
                    data: [{
                        title: "",
                        toolTip: "",
                        value: 100,
                        color: 0xffff77,
                    }, ],
                },
            ],
        };
    },
    created() {},
    mounted() {
        this.drawLChart("histogram", "his-1", this.data2, {
            manifest: {
                separation: true,
                heap: true,
            },
            cameraOpt: {
                fov: 30,
                width: 400,
                height: 400,
                position: {
                    x: 1.2,
                    y: 1.6,
                    z: 4,
                },
            },
        });
        this.drawLChart("histogram", "his-2", this.data2, {
            manifest: {
                separation: false,
                heap: true,
            },
            cameraOpt: {
                fov: 30,
                width: 400,
                height: 400,
                position: {
                    x: 1.2,
                    y: 1.6,
                    z: 4,
                },
            },
        });
        this.drawLChart("histogram", "his-3", this.data2, {
            manifest: {
                separation: false,
                cylinder: true,
                heap: true,
            },
            cameraOpt: {
                fov: 30,
                width: 400,
                height: 400,
                position: {
                    x: 1.2,
                    y: 1.6,
                    z: 4,
                },
            },
        });
        this.drawLChart("histogram", "his-4", this.data2, {
            manifest: {
                separation: true,
                cylinder: true,
                heap: true,
            },
            cameraOpt: {
                fov: 30,
                width: 400,
                height: 400,
                position: {
                    x: 1.2,
                    y: 1.6,
                    z: 4,
                },
            },
        });
        this.drawLChart("histogram", "his-5", this.data3, {
            manifest: {
                cylinder: false,
                heap: true,
            },
            cameraOpt: {
                fov: 30,
                width: 400,
                height: 400,
                position: {
                    x: 1.2,
                    y: 1.6,
                    z: 4,
                },
            },
        });
        this.drawLChart("histogram", "his-6", this.data3, {
            manifest: {
                cylinder: true,
                heap: true,
            },
            cameraOpt: {
                fov: 30,
                width: 400,
                height: 400,
                position: {
                    x: 1.2,
                    y: 1.6,
                    z: 4,
                },
            },
        });

        this.drawLChart("histogram", "his-no-heap-1", this.data2, {
            manifest: {
                heap: false,
            },
            cameraOpt: {
                fov: 12,
                width: 600,
                height: 400,
                position: {
                    x: 1,
                    y: 1,
                    z: 5,
                },
            },
        });
        this.drawLChart("histogram", "his-no-heap-2", this.data2, {
            manifest: {
                cylinder: true,
                heap: false,
            },
            cameraOpt: {
                fov: 12,
                width: 600,
                height: 400,
                position: {
                    x: 1,
                    y: 1,
                    z: 5,
                },
            },
        });
    },
    methods: {},
};
</script>

<style lang="scss">
.my-his-wrapper {
    display: flex;
    flex-wrap: wrap;
}
</style>
